<!--
 * @Author: CPS
 * @email: 373704015@qq.com
 * @Date: 2021-02-15 20:18:22
 * @Last Modified by: CPS
 * @Last Modified time: 2021-02-15 20:18:22
 * @Filename Aside.vue
 * @Description: 功能描述
-->
<template lang="pug">
v-card(flat, title)
  v-toolbar(tabs, dense, flat, color="purple", dark)
    v-toolbar-title 账号
    v-spacer
    v-btn(icon="")
      v-icon mdi-view-module

  v-list(subheader="", two-line="")
    //- v-divider(inset="")
    v-subheader(inset="") 已绑定

    v-list-item(
      @click="test",
      link,
      v-for="folder in folders",
      :key="folder.title")
      v-list-item-avatar
        v-icon.grey.lighten-1(dark="")
          | mdi-folder
      v-list-item-content
        v-list-item-title(v-text="folder.title")
        v-list-item-subtitle(v-text="folder.subtitle")
      v-list-item-action
        v-btn(icon="")
          v-icon(color="grey lighten-1") mdi-information

    //- v-divider(inset="")
    v-subheader(inset="") 未绑定
    v-list-item(
      @click="test",
      link,
      v-for="file in files",
      :key="file.title")
      v-list-item-avatar
        v-icon(:class="file.color", dark="", v-text="file.icon")
      v-list-item-content
        v-list-item-title(v-text="file.title")
        v-list-item-subtitle(v-text="file.subtitle")
      v-list-item-action
        v-btn(icon="")
          v-icon(color="grey lighten-1") mdi-information

</template>

<script>
export default {
  components: {},
  /*=========================================== 属性 ===================================*/
  props: {},
  data: () => ({
    hidden: null,
    value: null,
    drawer: null,
    show: true,
    files: [
      {
        color: "blue",
        icon: "mdi-clipboard-text",
        subtitle: "Jan 20, 2014",
        title: "Vacation itinerary",
      },
      {
        color: "amber",
        icon: "mdi-gesture-tap-button",
        subtitle: "Jan 10, 2014",
        title: "Kitchen remodel",
      },
    ],
    folders: [
      {
        subtitle: "Jan 9, 2014",
        title: "Photos",
      },
      {
        subtitle: "Jan 17, 2014",
        title: "Recipes",
      },
      {
        subtitle: "Jan 28, 2014",
        title: "Work",
      },
    ],
  }),
  computed: {},
  /*=========================================== 方法 ===================================*/
  methods: {
    async test() {
      console.log("aside: test");
    },
  },

  /*=========================================== 生命周期 ===================================*/
  created() {},
  mounted() {},
};
</script>
<style lang="stylus" scoped></style>
